<template>
  <div class="root">
    <wux-search-bar
      clear
      show-cancel
      :value="value"
      controlled
      placeholder="请输入商品名称"
      @change="onChange"
      @confirm="onConfirm"
      @clear="onClear"
    />
    <wux-spin nested :spinning="contentSpinning">
      <goodsList :goods="goods" :showStyle="true"></goodsList>
    </wux-spin>
  </div>
</template>

<script>
import goodsList from "@/components/goods/goodsList";

import typeConfig from "@/api/types";
export default {
  components: {
    goodsList
  },
  data() {
    return {
      contentSpinning: false,
      goods: [],
      value: ""
    };
  },
  mounted() {
    wx.showShareMenu();
    this.queryCommodity();
  },
  methods: {
    onClear() {
      this.value = "";
    },
    onChange(e) {
      this.value = e.target.value;
    },
    onConfirm() {
      const self = this;
      this.contentSpinning = !this.contentSpinning;
      this.$http
        .request({
          url: typeConfig.queryCommodityByShopIdTypeId,
          method: "POST",
          body: {
            title: self.value,
            sId: this.$store.state.shop.id
          }
        })
        .then(res => {
          this.contentSpinning = !this.contentSpinning;
          this.goods = res.list;
        });
    },
    queryCommodity() {
      this.contentSpinning = !this.contentSpinning;
      this.$http
        .request({
          url: typeConfig.queryCommodityByShopIdTypeId,
          method: "POST",
          body: {
            sId: this.$store.state.shop.id
          }
        })
        .then(res => {
          this.contentSpinning = !this.contentSpinning;
          this.goods = res.list;
        });
    }
  }
};
</script>


<style scoped lang="less">
</style>


